<style lang="less" scoped>
@import "./comment-list.less";
</style>
<script>
// import cloneDeep from 'lodash.clonedeep'
import Icon from '~/components/icon'
import Like from '~/components/like'
import Comment from '~/components/comment'
import Cap from '~/components/cap'
import avatar from '~/assets/images/avatar.png'
export default {
  components: {
    'v-comment': Comment,
    'v-icon': Icon,
    'v-like': Like,
    'v-cap': Cap
  },
  props: {
    dataSource: {
      type: Array,
      required: true
    },
    base: {
      type: Object,
      required: true
    },
  },
  data () {
    return {
      mentions: [
        {
          headUrl: '',
          name: 'pwkpwkpwkpwkpwkpwkpwkpwkpwk',
          dec: '前端前端前端前端前端前端前端'
        },
        {
          headUrl: '',
          name: 'pwk2',
          dec: '前端2'
        }
      ],
    }
  },
  created () {},
  methods: {
    previewComment (content, item) {
      let { replyList } = item
      // const newItem = cloneDeep(item)
      if (replyList) {
        item.replyList.unshift({
          ...this.base,
          content
        })
      } else {
        replyList = [{
          ...this.base,
          content
        }]
      }
    },
    createCommentItem (data, level = '') {
      return (
        <div>
          {data.map((item) => {
            return (
              <div class={{ 'content-item': true, 'content-item-close': item.fold }}>
                <div class="head">
                  <v-icon class="oc-icon" type={item.fold ? 'sub' : 'add'} onClick={() => { item.fold = !item.fold }}/>
                  <v-like
                    class="like"
                    liked={false}
                    number={100}
                    size="small"
                  />
                  <a-tooltip>
                    <template slot="title">
                      Tooltip will show when mouse enter.
                    </template>
                    <v-icon class="merge-icon" type="merge" />
                  </a-tooltip>
                  <img class="headImg" src={avatar} />
                  <span class="name">小红帽</span>
                  <div class="my-cap">
                    <v-cap name="社区管理员" />
                  </div>
                  <span class="data">2020/04/15 19:37:01</span>
                  <span class="reply" onClick={() => { item.reply = true }}>回复</span>
                  <span class="merge-title">
                    |
                    标题内容文案标题内容文案标题内容文案标题内容标题内容文案标题内容文案标题内容文案标题内容
                  </span>
                </div>
                <div class='main'>{item.content}</div>
                {
                  item.reply && <div class="reply-comment">
                    <v-comment
                      rows={3}
                      mentions={this.mentions}
                      size="small"
                      onCancel={() => { item.reply = false }}
                      onPreview={(value) => { this.previewComment(value, item) }}
                    />
                  </div>
                }
                <div class="maozi">
                  <label>选择帽子</label>
                  <a-select default-value="lucy" class="maoziSelect">
                    <a-select-option value="jack">Jack</a-select-option>
                    <a-select-option value="lucy">Lucy</a-select-option>
                    <a-select-option value="Yiminghe">yiminghe</a-select-option>
                  </a-select>
                </div>
                {item.replyList && item.replyList.length > 0 && (
                  <div class={{ reply: true, 'root-reply': level === 'root' }}>
                    {this.createCommentItem(item.replyList)}
                  </div>
                )}
              </div>
            )
          })}
        </div>
      )
    }
  },
  render () {
    return (
      <div class="comment-list">
        {this.createCommentItem(this.dataSource, 'root')}
      </div>
    )
  }
}
</script>
